{extend name="main"}
{block name="style"}
<style>
    .hide .el-upload--picture-card {
        display: none;
    }
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
    <div  style="background-color:#fff7f0;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);color: #f59A23;margin-bottom: 50px;">
        <div style="flex: 1 1 0%;padding: 20px">
            <li>
                <span>1、每位客户/每个客户群每天可接收1条群发消息，可以是企业统一创建发送的，也可以是成员自己创建发送的；超过接收上限的客户/客户群将无法再收到群发消息。</span>
            </li>
            <li>
                <span>2、注意：调用该接口并不会直接发送消息给客户/客户群，需要成员确认后才会执行发送（客服人员的企业微信需要升级到2.7.5及以上版本）。</span>
            </li>
            <li><span>3、企业发表
管理员或者业务负责人创建内容，成员确认后，即可发送给客户或者客户群。
个人发表
成员自己创建的内容，可直接发送给客户或客户群</span></li>
        </div>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px"  v-loading="form.ajax">
        <el-form-item label="任务名称"  prop="title">
            <el-input v-model="form.title"  size="small" style="width: 40%" placeholder="名称不会展示给用户，用于企业记录渠道"></el-input>
        </el-form-item>

        <el-form-item label="任务类型">
            <el-radio-group v-model="form.chat_type">
                <el-radio  :label="'single'">客户</el-radio>
                <el-radio :label="'group'">客户群</el-radio>
            </el-radio-group>
        </el-form-item>


        <el-form-item label="选择客户" prop="externalUserValue" v-if="form.chat_type=='single'">
            <el-select v-model="form.externalUserValue" multiple placeholder="请选择" style="width: 40%"    size="small">
                <el-option
                        v-for="item in externalUser"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="选择员工" prop="userValue" v-else>
            <el-select v-model="form.userValue"  placeholder="请选择" style="width: 40%"    size="small">
                <el-option
                        v-for="item in user"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>



        <el-form-item label="群发消息1">
            <el-input style="width: 40%"    size="small"
                      type="textarea"
                      :rows="4"
                      maxlength="600"
                      show-word-limit
                      placeholder="请输入群发消息1"
                      v-model="form.content">
            </el-input>
<!--            <el-button type="text" @click="addCustomerName">[插入客户昵称]</el-button>-->
        </el-form-item>


        <el-form-item label="群发消息2">
            <el-radio-group v-model="form.content_type">
                <el-radio  :label="1">图片</el-radio>
                <el-radio :label="2">链接</el-radio>
                <el-radio :label="3">小程序</el-radio>
            </el-radio-group>


            <div v-if="form.content_type==1">
                <el-upload
                        name="file"
                        action="/work-wechat/uploadimgToWeChat"
                        :data="{path:'web/img'}"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="handleAvatarSuccess"
                        :on-error="handleAvatarError"
                        :file-list="picArr"
                        :class="{hide:hideUpload}">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="form.itemData.image.pic_url" alt="">
                </el-dialog>
            </div>
            <div v-else-if="form.content_type==2" >
                <el-form-item label="链接" class="my-2" >
                    <el-input v-model="form.itemData.link.url"  size="small" style="width: 35%" placeholder="链接地址请以http或https开头"></el-input>
                </el-form-item>
                <el-form-item label="标题" class="my-2" >
                    <el-input v-model="form.itemData.link.title"  size="small" style="width: 35%" placeholder="请输入链接标题"></el-input>
                </el-form-item>
                <el-form-item label="描述" class="my-2" >
                    <el-input v-model="form.itemData.link.desc"  size="small" style="width: 35%" placeholder="请输入链接描述"></el-input>
                </el-form-item>
                <el-form-item label="封面图片">
                    <el-upload
                            name="file"
                            action="/work-wechat/uploadimgToWeChat"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess"
                            :on-error="handleAvatarError"
                            :file-list="picArr"
                            :class="{hide:hideUpload}">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="form.itemData.link.picurl" alt="">
                    </el-dialog>
                </el-form-item>
            </div>
            <div v-else-if="form.content_type==3">
                <span style="color:red;">该小程序必须是关联到企业的小程序应用，否则将会推送失败</span>
                <el-form-item label="标题" class="my-2" >
                    <el-input v-model="form.itemData.miniprogram.title"  size="small" style="width: 35%" placeholder="请输入小程序标题"></el-input>
                </el-form-item>
                <el-form-item label="小程序appid"class="my-2" >
                    <el-input v-model="form.itemData.miniprogram.appid"  size="small" style="width: 35%" placeholder="请输入小程序appid"></el-input>
                </el-form-item>
                <el-form-item label="小程序路径" class="my-2" >
                    <el-input v-model="form.itemData.miniprogram.page"  size="small" style="width: 35%" placeholder="请输入小程序路径"></el-input>
                </el-form-item>
                <el-form-item label="封面图片">
                    <el-upload
                            action="/uploadFiles"
                            :data="{path:'web/img'}"
                            list-type="picture-card"
                            :on-success="handleAvatarSuccess"
                            :on-error="handleAvatarError"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :file-list="picArr"
                            :class="{hide:hideUpload}">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="form.itemData.miniprogram.picurl" alt="">
                    </el-dialog>
                </el-form-item>
            </div>
        </el-form-item>



        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即保存</el-button>
            <el-button  @click="()=>{window.location.href='/work-wechat/massTask';}">取消</el-button>
        </el-form-item>
    </el-form>

</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var title=''
    var content=''
    var content_type=1
    var appid="{$appid}";
    var user = JSON.parse('{:json_encode($user)}'.replace(/[\r\n\s+]/g, '\\n'));
    var externalUser = JSON.parse('{:json_encode($externalUser)}'.replace(/[\r\n\s+]/g, '\\n'));
    // console.log(user)
    var itemData={
        image:{
            pic_url:'',
        },
        link:{
            url:'',
            title:'',
            desc:'',
            picurl:""
        },
        miniprogram:{
            title:'',
            appid:appid,
            page:'/pages/common/home/home',
            path:'',
            picurl:""

        }
    }
    var dialogVisible=false;
    var hideUpload=false;
    var picArr=[]
</script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            view: XYBase.view,
            hideUpload: hideUpload,
            picArr:picArr,
            form: {
                title:title,
                ajax:false,
                content:content,
                content_type:content_type,
                chat_type:'single',
                itemData:itemData,
                userValue:"",
                externalUserValue:[],

            },
            user:user,
            externalUser:externalUser,
            dialogVisible: dialogVisible,
            rules: {
                title: [
                    { required: true, message: ' 请输入群发消息名称', trigger: 'blur' },
                ],
                userValue:[
                    { required: true, message: '请选择员工', trigger: 'blur' },
                ],
                externalUserValue:[
                    { required: true, message: '请选择客户', trigger: 'blur' },
                ]
            }

        },
        watch: {
            view: XYBase.viewWatch,
        },
        created() {
            XYBase.created(this);
        },
        methods: {
            //提交创建
            onSubmit() {
                var _this=this;
                let itemData='';
                if (_this.form.title==''){
                    XYBase.error("请输入任务名称");
                    return;
                }
                let oldItemData=_this.form;
                if (_this.form.content_type == 2) {
                    if (_this.checkItemData(oldItemData.link) && _this.form.content == '') {
                        XYBase.error("请完善群发消息2的外链表单");
                        return;
                    }
                    itemData = _this.form.itemData.link;
                } else if (_this.form.content_type == 3) {
                    if (_this.checkItemData(oldItemData.miniprogram) && _this.form.content == '') {
                        XYBase.error("请完善群发消息2的小程序的表单");
                        return;
                    }
                    itemData = _this.form.itemData.miniprogram;
                } else {
                    if (_this.checkItemData(oldItemData.image) && _this.form.content == '') {
                        XYBase.error("请上传群发消息2的图片");
                        return;
                    }
                    itemData = _this.form.itemData.image;
                }
                oldItemData.itemData = itemData
                oldItemData = {...oldItemData}
                oldItemData.type=1
                _this.form.ajax=true;
                _this.setFormItem(_this.form)
                $.ajax({
                    url:"/work-wechat/addMassTask",
                    type:'post',
                    data: oldItemData,
                    dataType:'json',
                    error:function(err){
                        _this.form.ajax=false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success:function(ret){
                        _this.form.ajax=false;
                        if (ret) {
                            if (ret.code === 0) {
                                XYBase.success("保存成功");
                                setTimeout(() => {
                                    window.location.href='/work-wechat/massTask';
                                }, 1000);
                            }else{
                                XYBase.error(ret.msg);
                            }
                        }else{
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });
            },
            setFormItem(data){
                var itemData={
                    image:{
                        pic_url:'',
                    },
                    link:{
                        url:'',
                        title:'',
                        desc:'',
                        picurl:""
                    },
                    miniprogram:{
                        title:'',
                        appid:'',
                        page:'',
                        path:'',
                        picurl:''

                    }
                }
                switch (data.content_type){
                    case 1:itemData.image=data.itemData;
                        urls=itemData.image.pic_url;
                        break;
                    case 2:itemData.link=data.itemData;
                        urls=itemData.link.picurl;
                        break;
                    case 3:itemData.miniprogram=data.itemData;
                        urls=itemData.miniprogram.picurl;
                        break;
                }
                this.form.itemData=itemData;
            },
            checkItemData(obj){
                obj
                for (var key in obj){
                    if (obj.hasOwnProperty(key) && key !='picurl') {
                        if (obj[key] === null || obj[key] === '') {
                            return true;
                        }
                    }
                }
                return false;
            },
            handleAvatarSuccess:function(res, file) {
                if(res){
                    if(res.code === 0){
                        if(this.form.content_type==2)
                            this.form.itemData.link.picurl=res.data;
                        else if(this.form.content_type==3){
                            // console.log(res);
                            this.form.itemData.miniprogram.picurl=res.data.url;
                            this.form.itemData.miniprogram.path=res.data.path;
                        }
                        else
                            this.form.itemData.image.pic_url=res.data;
                        this.hideUpload = true;
                        XYBase.success(res.msg);
                    }else{                 console.log(res)
                        XYBase.error(res.msg);}
                }else{XYBase.error(XYBase.config.system_network_error)}
            },
            handleAvatarError:function(res, file) {
                XYBase.error(XYBase.config.system_network_error)
            },

            //点击添加客户昵称
            addCustomerName(){
                this.form.content+='#用户昵称#'
            },

            handleRemove(file, fileList) {
                // console.log(file, fileList);
                this.hideUpload=false;

            },
            //点击图片上传
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }



        }
    });
    $(function () {
        $(window).resize(function () {
            reloadWindowSize();
        });
    });
    function reloadWindowSize(argument) {
        var winW = $(window).width();
        if (winW <= 576) {
            vm.labelPosition = 'top';
        } else {
            vm.labelPosition = 'right';
        }
    }
</script>
{/block}